<!-- 根据数据渲染不同表格 -->
<template>
  <div>
    <div class="table">
      <div class="thead">
          <div class="tr">
            <div :class="changeFlex?'th column':'th'" v-for="(item,i) in tableHeader" :key="i">{{item}}</div>
          </div>
      </div>
      <div class="tbody">
        <div  v-for="(item,index) in tableData" :key="index">
          <div class="lvOneTr tr" @click="item.isOpen = !item.isOpen">
            <div
              :class="changeFlex?'td changeFlex': 'td'" 
              v-for="(itemSon,i) in item" 
              :key="i" 
              v-show="i!=='children'&&i!=='isOpen'">
              <div class="iconDiv" v-if="i==='organname'">
                <svg-icon :icon-class="item.isOpen? 'arrow-right' :'arrow-bottom'"></svg-icon>
              </div>
              {{itemSon}}
            </div>
            <div class="td">
              <a href="###" @click="detail(item)">详情></a>
            </div>
          </div>
          <!-- 隐藏的tr -->
          <div class="lvTwoTr tr" v-for="(ite,inx) in item.children" :key="inx" v-show="item.isOpen">
            <div 
              :class="changeFlex?'td changeFlex': 'td'" 
              v-for="(itemSon,idx) in ite" 
              :key="idx" 
              v-show="idx!=='children'">
              {{itemSon}}
            </div>
            <div class="td">
              <a href="###" @click="detail(item)">详情></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lookMore" @click="lookMore">
      {{isMore?'查看更多':'收起'}}
      <span class="iconSpan"><svg-icon icon-class="xiala"></svg-icon></span>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/index.js'
import {sortTree} from '@/untils/untils.js'
export default {
  props:['currentTable'], // 当前在哪个tab选项
  components: {},
  data() {
  return {
      isMore: true,
      changeFlex:false,//是否更改第二列
      tableData:[],
      parameter:{
        "methodName":"getOrganInfo",
        "pageindex":"1",
        "pagesize":"8",
        "usercode":'700246',
        "roleid":'4028088136dd9f6f0136dda59a660002'
      }
    };
  },
  watch:{
    'currentTable':{
      handler(newVal){
        if (newVal === '2-3') {
          this.changeFlex = true
        }else{
          this.changeFlex = false
        }
        this.implementRequest()
      },
      immediate:true
    }
  },
  computed:{
    tableHeader(){
      switch (this.currentTable) {
        case '0-0': return ['单位','党委数','党总支数','党支部数','党员数','操作'];break;
        case '0-1': return ['单位','上次换届时间','设定委员数','现有委员数','党委书记','党委副书记','应换届时间','操作'];
        break;
        case '1-0': return ['单位','在岗党员','离岗党员','生活困难党员','党委书记','党支部书记数','党务工作者数','操作'];break;
        case '1-1': return ['单位','入党申请人','入党积极分子','发展对象','预备党员','党员比例','操作'];break;
        case '2-1': return ['单位','党支部数','党员大会','党支部委员会','党小组会','党课平均次数','应召开次数','操作'];break;
        case '2-2': return ['单位','参加组织生活次数','党支部委员会会议','党组小会','党课平均次数','操作'];break;
        case '2-3': return ['单位','领导班子参加基层联系点单位','活动次数','操作'];break;
        default: return false
          break;
      }
    }
  },
  created(){
   
  },
  methods: {
    implementRequest(){ // 根据不同tab执行不同请求
      this.tableData = []
      this.parameter.pageindex = '1'
      this.isMore = true
      switch (this.currentTable) { 
        case '0-0':this.parameter.methodName = 'getOrganInfo';break;
        case '1-0':this.parameter.methodName = 'getUserRoleInfo';break;
        case '1-1':this.parameter.methodName = 'getDevelopmentInfo';break;
        case '2-1':this.parameter.methodName = 'meetingStat';break;
      }
      this.getUserInfo(this.parameter,this.handlerFun)
    },
    handlerFun(value){
      if (this.isMore) { //查看更多
        this.tableData.push(...value)
        if (this.tableData.length%8==0) {
          this.isMore = true
        }else{
          this.isMore = false
        }
      } else{ // 收起
        this.tableData = value
      }
    },
    getUserInfo(value,handlerFun){
      let result = []
      getUserInfo(value).then(res => {
        const data = res.data
        if (res.status == '1') {
          switch (res.methodName) {
            case 'getOrganInfo':
              result = sortTree( 
                data.children,
                ['organname','dwcount','dzzcount','dzbcount','dycount']
              )
              break;
            case 'getUserRoleInfo':
              result = sortTree( 
                data.children,
                ['organname','zgdycount','lgdycount','kndycount','dysjcount','dzbsjcount','dyggzcount']
              )
              break;
            case 'getDevelopmentInfo':
              result = sortTree( 
                data.children,
                ['organname','sqrcount','jjfzcount','fzdxcount','ybdycount','dybcount']
              )
              break;
            case 'meetingStat':
              result = sortTree( 
                data.children,
                ['organname','dzbs','dydh','zwh','dxz','dk','dk']
              )
              break;
          }
          handlerFun(result)
        } else {
          this.$toast('请求出错')
        }
      })
    },
    detail(item){ // 详细
      console.log(item)
    },
    lookMore(){ //查看更多|收起
      if(this.isMore){
        let pageindex = Number(this.parameter.pageindex);
        pageindex += 1
        this.parameter.pageindex = pageindex.toString()
      } else {
        this.parameter.pageindex = '1'
      }
      this.getUserInfo(this.parameter,this.handlerFun)
    }
  }
}
</script>
<style scoped>
.tr .column:nth-child(2){
  flex: 3 !important
}
.tr .column:nth-child(1){
  flex:1.4 !important
}
.tr .changeFlex:nth-child(2){
  flex:3 !important
}
.tr .changeFlex:nth-child(1){
  flex:1.4 !important
}
.lookMore{
  color:#BB383E;
  text-align: center;
  font-size: 2rem;
  padding: 1rem 0;
}
.iconSpan{
  display: inline-block;
  height: 2rem;
  width: 2rem;
}
a{
  text-decoration:none;
  color:#BB383E;
}
.iconDiv{
  display: inline-block;
  margin: 0 0.5rem;
  height: 2rem;
  width: 1.2rem;
}
.lvTwoTr .td{
  background: #FFF;
  margin: 0;
  border-left: 1px solid #EAEAEA;
  border-top: 1px solid #EAEAEA;
}
.lvTwoTr .td:nth-child(1), .lvTwoTr .tr:nth-child(1) .td{
  border-left: none;
}
.lvOneTr .td{
  background: #ccc;
}
 .thead .th{
   text-align: center;
  padding: 2rem 0 2rem 0rem;
 }
.tbody .td{
  text-align: center;
  padding: 2rem 0 2rem 0rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table{
  width: 100%;
  font-size: 2rem;
}
.thead, .tbody{
  width: 100%;
}
.tr .td:nth-child(1), .tr .th:nth-child(1){
  flex: 3;
  text-align: left;
  padding-left: 1rem;
}
.tr .th{
  background: #FFDFE0;
}
.tr .td, .tr .th{
  flex: 1.4;
  margin: 0 0 1px 1px;
}
.tr{
  display: flex;
}
.thead .th{
  font-weight: 600;
}
</style>